<template>
  <div class="avue-logo">
    <transition name="fade">
      <span v-if="getScreen(isCollapse)" class="avue-logo_subtitle" key="0">
        {{ website.logo }}
      </span>
    </transition>
    <transition-group name="fade">
      <template v-if="getScreen(!isCollapse)">
        <span class="avue-logo_title" key="1">{{ website.indexTitle }} </span>
      </template>
    </transition-group>
  </div>
</template>

<script setup>
import {computed} from "vue"
import {useCommonStore} from "@/store/modules/common.js";
import {getScreen} from "utils/util.js";
import website from "../../config/website.js";

defineOptions({
  name: "logo",
})
const isCollapse = computed(() => {
  const commonStore = useCommonStore()
  return commonStore.isCollapse
})

</script>
